/* 
1 在登录页面上，点击 注册 链接  跳转到注册页面
 1 获取 注册链接 dom元素，绑定点击事件
 2 事件触发
   1 先隐藏 登录 div
   2 后显示 注册 div 
1 在注册页面上，点击 登录 链接  跳转到登录页面
 1 获取 登录链接 dom元素，绑定点击事件
 2 事件触发
   1 先隐藏 注册 div
   2 后显示 登录 div 

2 注册业务
  1 给 注册表单 绑定 提交submit事件 - 阻止默认行为 - form 属性 autocomplete="off"  关闭历史输入
  2 事件触发
    1 获取用户名和密码
    2 简单 合法性校验-是否为空
    3 合法 使用 axios 把用户名和密码发送给后端 完成注册
    4 后端响应 成功 才提示用户 恭喜注册成功 

*/

//获取元素
const loginDiv = document.querySelector('.login');//登录大div
const loginA = document.querySelector('.login-a');//登录div中的超链接
const loginForm = document.querySelector('.login form');//登录大div中form表单
const registerDiv = document.querySelector('.register');//注册大div
const registerA = document.querySelector('.register-a');//注册div中的超链接
const registerForm = document.querySelector('.register form');//注册大div中form表单

//绑定事件 
//登录
loginA.addEventListener('click', e => {
    // 1 先隐藏 登录 div
    loginDiv.style.display = "none";
    // 2 后显示 注册 div
    registerDiv.style.display = "block";
})
//注册
registerA.addEventListener('click', e => {
    // 1 先隐藏 注册 div
    registerDiv.style.display = "none";
    // 2 后显示 登录 div
    loginDiv.style.display = "block";
})

//注册业务
registerForm.addEventListener('submit', async (e) => {
    //阻止默认行为
    e.preventDefault();
    // toastr["error"]("33", "33")
    // toastr.success("33标题", "33内容");

    //获取表单中用户名和密码的value
    const username = registerForm.querySelector('input[name="username"]').value.trim();
    const password = registerForm.querySelector('input[name="password"]').value.trim();
    //校验是否为空
    if (!username || !password) {
        alert('您输入的信息不合法！');
        //如果还是不满足继续返回
        return;
    };

    //使用axios发送请求
    const reslut = await axios({
        url: "/api/register",
        method: 'post',
        data: {
            // username: username,
            // password: password,
            //es6 简写
            username,
            password,
        }
    });


    //输出响应结果
    console.log(reslut);
    //判断是否成功
    if (reslut.data.code === 0) {
        toastr.success(reslut.data.message, "恭喜");
        setTimeout(() => {
            // 切换显示 登录表单
            registerA.click();
            //把账好填入登录表单 用户名标签上
            loginDiv.querySelector("input[name=username]").value = username;
        }, 1500);
    }

});


//登录业务
loginForm.addEventListener('submit', async e => {
    //阻止默认行为
    e.preventDefault();
    //获取表单中用户名和密码的value
    const username = loginForm.querySelector('input[name="username"]').value.trim();
    const password = loginForm.querySelector('input[name="password"]').value.trim();

    //校验是否为空
    if (!username || !password) {
        alert('您输入的信息不合法！');
        //如果还是不满足继续返回
        return;
    };

    //使用axios发送请求
    const reslut = await axios({
        url: "/api/login",
        method: 'post',
        data: {
            // username: username,
            // password: password,
            //es6 简写
            username,
            password,
        }
    });
    //输出响应结果
    console.log(reslut);
    //判断是否成功
    if (reslut.data.code === 0) {
        //把token存到本地存储中
        localStorage.setItem("token117", reslut.data.token);
        toastr.success(reslut.data.message, "恭喜");
        setTimeout(() => {
            location.href = "index.html";
        }, 1500);
    }
})






